<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.5/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <canvas class="cavs" width="1000" height="1000"></canvas>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="4" class="logo">
                    <el-image style="width: 100px; height: 100px;border-radius: 50%;"
                              src="/statics/images/logo.gif" fit="fill">
                    </el-image>
                </el-col>
                <el-col :span="24">
                    <h2 style="font-size: 50px">心语博客站</h2>
                </el-col>
            </el-row>
        </el-header>
    </el-container>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <div class="user_login app">
                <div class="login-container">
                    <h2>账户登录</h2>
                    <div>
                        <div class="username">
                            <input required type="text" id="username" name="account" v-model="form.account" autocomplete="off">
                            <span class="bar"></span>
                            <label for="username">Account</label>
                        </div>
                        <div class="password">
                            <input required type="password" id="password" name="password" v-model="form.password">
                            <span class="bar"></span>
                            <label for="username">Password</label>
                        </div>
                    </div>
                    <el-button type="primary" @click="onSubmit('form')">登录</el-button>
                    <a href="http://localhost:8080/register"><el-button type="primary" style="margin-left: 0">注册</el-button></a> <!-- 去注册按钮 -->
                </div>
        </div>
    </el-form>.
      <!-- 登录页面 -->
</div>
<script src="/statics/js/request.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                // visible: false,
                // name:""
                form:{
                    account:"",
                    password:'',
                },
                rules: {
                    account:[
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }
                    ],
                    password:[
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        created(){
            // request.get("http://localhost:8080/ss",{name:"hello,张三",age:18},(res)=>{
            //     console.log(res)
            //     this.name = res.a
            // })
            // request.post("/bb",{a:1,b:"43545"}/*,{name:"hello,张三",age:18}*/,(res)=>{
            //     console.log(res)
            // })
            // request.put("/aa/1",{a:1,b:"43545"},{name:"hello,张七",age:18},res=>{
            //     console.log(res)
            // })
            // request.post("/bb",null,res=>{
            //     console.log(res)
            // })
            // const token = window.sessionStorage.getItem('token');
            // if (!token) {
            //     window.location = 'http://localhost:8080/login.html';
            // }
        },
        methods:{
            onSubmit(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        request.post('/login', this.form, (res) => {
                            window.sessionStorage.setItem('token', res.token);
                            document.cookie = "token=" + res.token;
                            if (res.token) {
                                window.location = 'http://localhost:8080/index';
                            } else {
                                this.$message.error('登录失败，请检查账号或密码！');
                            }
                        });
                    } else {
                        this.$message("登录失败，请检查账号或密码！");
                    }
                });
            }
        }
    })
</script>
<script src="/statics/js/jq.js"></script>
<script src="/statics/js/ban.js"></script>
<link rel="stylesheet" href="/statics/css/login.css">
</body>
</html>